//用户信息组件
<template>
  <div class="profile">
    <div class="profile-avatar">
      <img :src="userInfo.avatar" alt="头像"/>
    </div>
    <div class="profile-info">
      <h2 class="username">{{ userInfo.nickname }} <p class="vip-badge">{{ userInfo.identity }}</p></h2>
      <p class="certification">认证信息: 博文作者</p>
      <div class="stats">
        <span>💬评论{{ userInfo.comment_count }}</span>
        <span>👍点赞{{ userInfo.like_count }}</span>
        <span>⭐收藏{{ userInfo.collection_count }}</span>
        <span>📅{{ userInfo.created_date }} 加入</span>
        <span>📍 来自{{ userInfo.address }}</span>
      </div>

      <p class="signature">{{ userInfo.bio }}</p>
    </div>
    <div class="profile-actions">
      <button class="btn btn-add-friend" @click="EditBasicProfil">资料修改</button>
      <button class="btn btn-add-friend" @click="EditSocialProfile">社交修改</button>
      <button class="btn btn-send-message" @click="EditPassword">密码修改</button>
    </div>
  </div>
</template>

<script setup>
// 声明自定义事件
const emit = defineEmits(['userDataLoaded']);

const router = useRouter()
const userInfo = ref([])
const getUserInfo = async () => {
  const res = await axios.get('/api/accounts/auth/user_info/',{ requiresAuth: true })
  userInfo.value = res.data
  emit('userDataLoaded', userInfo.value);
}
// 编辑资料
const EditBasicProfil = () => {
  router.push('/edit/basic')
}
// 编辑社交资料
const EditSocialProfile = () => {
  router.push('/edit/social')
}

// 修改密码
const EditPassword = () => {
  router.push('/edit/password')
}
onMounted(() => {
  getUserInfo()

})

</script>

<style scoped>
/* 个人信息部分样式 */
.profile {
  margin: 0 auto 20px auto;
  text-align: center;
  background-color: var(--profile-bg-color, #fff);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.profile-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #eee;
  margin-bottom: 10px;
}

.profile-info {
  margin-bottom: 20px;
}

.username {
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0;
  color: var(--profile-title-color, #333);
}

.vip-badge {
  display: inline-block;
  margin-bottom: 5px;
  color: #ff5722;
  border: 1px solid #ff5722;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.certification {
  font-size: 14px;
  color: var(--profile-text-color, #666);
  margin-bottom: 5px;
}

.stats {
  font-size: 14px;
  color: var(--profile-text-color, #888);
  margin: 10px 0;
  padding: 0 10px;
}
.stats span {
  display: inline-block;
  margin-right: 5px;
  padding: 0 2px;
}
.signature {
  font-size: 14px;
  color: var(--profile-text-color, #aaa);
  font-style: italic;
}

.profile-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn {
  padding: 5px 15px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}

.btn-add-friend {
  background-color: var(--profile-btn-color, #f2f2f2);
  color: var(--profile-btn-text, #333);
}

.btn-add-friend:hover {
  background-color: var(--profile-btn-hover-color, #e6e6e6);
}

.btn-send-message {
  background-color:var(--profile-btn-message-color,  #1e90ff);
  color: var(--profile-btn-color, #fff);
}

.btn-send-message:hover {
  background-color: var(--profile-btn-message-hover-color, #187bcd);
}

</style>
